<template>
  <div class="content_base">
    <el-row :gutter="40">
      <!-- 完成主体工程投资占批复主体工程投资百分比mainPercent -->
       <el-col :span="18"><div class="grid-content bg-purple charts" >
          <div class="chart" id="chart1"></div>
       </div></el-col>
       <el-col :span="6"><div class="grid-content bg-purple-light tables">
         <div class="table" id="table1">
            <el-table
              :data="chartData1.tableData"
              stripe
              border
              style="width: 100%"
              @cell-click="dataDetial('mainPercent')"
              >
              <el-table-column
                prop="dikeName"
                label="圩堤名称"
                >
              </el-table-column>
              <el-table-column
                prop="percent"
                label="百分比">
              </el-table-column>
            </el-table>
         </div>
         </div>
       </el-col>
    </el-row>
        <!-- 累计完成投资百分比 cumulativePercent -->
    <el-row :gutter="40">
       <el-col :span="18"><div class="grid-content bg-purple charts" >
          <div class="chart" id="chart3"></div>
       </div></el-col>
       <el-col :span="6"><div class="grid-content bg-purple-light tables">
         <div class="table" id="table3">
            <el-table
              :data="chartData2.tableData"
              stripe
              border
              @cell-click="dataDetial('cumulativePercent')"
              style="width: 100%">
              <el-table-column
                prop="dikeName"
                label="圩堤名称"
                >
              </el-table-column>
              <el-table-column
                prop="percent"
                label="百分比">
              </el-table-column>
            </el-table>
         </div>
         </div>
       </el-col>
    </el-row> 
    <!-- 累计完成投资占批复总投资百分比completePercent -->
    <el-row :gutter="40">
       <el-col :span="18"><div class="grid-content bg-purple charts" >
          <div class="chart" id="chart2"></div>
       </div></el-col>
       <el-col :span="6"><div class="grid-content bg-purple-light tables">
         <div class="table" id="table2">
            <el-table
              :data="chartData3.tableData"
              stripe
              border
              @cell-click="dataDetial('completePercent')"
              style="width: 100%">
              <el-table-column
                prop="dikeName"
                label="圩堤名称"
                >
              </el-table-column>
              <el-table-column
                prop="percent"
                label="百分比">
              </el-table-column>
            </el-table>
         </div>
         </div>
       </el-col>
    </el-row> 
  </div>
</template>
<script>
// import echarts from  'echarts'
// export default {
//     data(){
//         return{
//           chartData1:{
//             dikeName:[],
//             percent:[],
//             tableData:[],
//           },
//           chartData2:{
//             dikeName:[],
//             percent:[],
//             tableData:[],
//           },
//           chartData3:{
//             dikeName:[],
//             percent:[],
//             tableData:[],
//           },
//         }
//     },
//     methods:{
//       //处理数据
//       getArr(code,resultData){
//         var _this = this;  
//         var result = {} 
//          var thisDate = (new Date()).getTime()
//         var chartData =  this.$axios.get(`/projectprocess/getData/${code}`,{params:{
//            thisDate:thisDate}
//          }).then(function(res){
//             var data = res.data.responseData;
//             var dikeName = []
//             var percent = []
//             var tableData = []
//             var chartdata = {}
//             for(var i=0;i<data.length;i++){
//               dikeName.push(data[i].dikeName)
//               percent.push(parseFloat(data[i].percent))
//               i<=10?tableData.push(data[i]):null
//             }  
//             resultData.dikeName = dikeName
//             resultData.percent = percent
//             resultData.tableData = tableData
//             _this.getChart()
//         })
  
//       },
//       //chart挂载
//       getChart(){
//         var _this = this
//         // this.$axios.get('/projectprocess/getData').then
//         var chart1 = echarts.init(document.getElementById('chart1'));
//         var chart2 = echarts.init(document.getElementById('chart2'));
//         var chart3 = echarts.init(document.getElementById('chart3'));
//         // console.log(chart2)
//         chart1.setOption({
//               title:{
//                 text:'完成主体工程投资占批复主体工程投资百分比的曲线图(%)'
//               },
//                 xAxis: {
//                     type: 'category',
//                     data: this.chartData1.dikeName
//                 },
//                 yAxis: {
//                     type: 'value'
//                 },
//                 series: [{
//                     data: this.chartData1.percent,
//                     type: 'line',
//                     smooth:true
//                 }]
//             });
//             chart2.setOption({
//               title:{
//                 text:'累计完成投资占批复总投资百分比(%)'
//               },
//                 xAxis: {
//                     type: 'category',
//                     data: this.chartData3.dikeName
//                 },
//                 yAxis: {
//                     type: 'value'
//                 },
//                 series: [{
//                     data: this.chartData3.percent,
//                     type: 'line',
//                     smooth:true
//                 }]
//             });
//             chart3.setOption({
//               title:{
//                 text:'累计完成投资百分比(%)'
//               },
//                 xAxis: {
//                     type: 'category',
//                     data: this.chartData2.dikeName
//                 },
//                 yAxis: {
//                     type: 'value'
//                 },
//                 series: [{
//                     data: this.chartData2.percent,
//                     type: 'line',
//                     smooth:true
//                 }]
//             });
//       },
//       //点击表格查看详细信息
//       dataDetial(percent){
//         this.$router.push({name:'dataDetial',params:{
//           percent:percent
//         }})
//         }
//     },
//     mounted(){
//         //发送请求获得数据
//         this.getArr(1,this.chartData1)
//         this.getArr(2,this.chartData2)
//         this.getArr(3,this.chartData3)
//         console.log(this.chartData1)
//          },
//   created(){
         
//   }
// }
</script>

<style>
.grid-content{
   margin-top:50px;
}
.charts{
  overflow-x: scroll;
  margin-left:10px;
  margin-top:50px;
   background-color: rgba(250, 183, 102,0.2);
}
.chart{
        width:auto;
        height: 600px;
       
        
}
</style>

